<template>
  <body style="width: 1902px;margin-left: -1.1%;margin-top: -7%">
  <div class="background">
    <img src="static/背景2.jpg" width="100%" height="100%" alt=""/>
  </div>
  <el-carousel :interval="4000" type="card" height="350px" style="width:1500px;margin-left: 11.5%;margin-top: 10%;">
    <div v-for="item in books.slice(4,9)" @click="showT(item)">
    <el-carousel-item class="el-carousel__item">
      <img :src="'https://images.weserv.nl/?url='+item.img" onerror="this.src='static/error.jpg'" style="height: 350px;width: 500px;" alt="封面">
    </el-carousel-item>
    </div>
  </el-carousel>
  <h2 style="margin-left: 13%; padding: 0;font-size: 16px;
  line-height: 28px; width:1500px;color: rgba(89, 195, 249, 1);
  min-height: 32px;border-bottom: 1.5px solid rgba(89, 190, 249, 1);
  text-align: justify">
    <span>
      <span style="background-color: rgba(89, 195, 249, 1);
       color: rgba(255, 255, 255, 1); float: left; line-height: 20px;
       margin: 0 8px 0 0;padding: 4px 10px;">好书推荐</span>
      <span style="font-size: 16px;margin-left: 85%"><a @click="show" style="text-decoration-line: none;">查看更多>>></a></span>
    </span></h2>
  <el-row style="height: 800px;margin-left: 13%">
    <div v-for="item in books.slice(0,4)" @click="showT(item)">
      <el-card :id="item.bookId" style="width: 350px;height: 350px;float: left;margin-right: 15px" class="book"
               bodyStyle="padding:10px" shadow="hover">
        <div class="cover">
          <img :src="'https://images.weserv.nl/?url='+item.img" onerror="this.src='static/error.jpg'"
               style="width: 200px;height: 250px;" alt="封面">
        </div>
        <div class="title">
          <a href="">{{item.bookName}}</a>
        </div>
        <div class="author">{{item.author}}</div>
      </el-card>
    </div>
  </el-row>
  </body>
</template>

<script>
  export default{
    data() {
      return {
        books: [
          {
            bookId: '',
            typeId: '',
            img: '',
            bookName: '',
            author: '',
            publisher: '',
            price: '',
            summary: '',
            bnumber: ''
          },
        ],
        index:'',
      }
    },
    created() {
      // 将当前对象赋值给 _this
      const _this = this;
      // 发出请求：这里的 URL 是 SpringBoot项目的一个可用路径
      _this.$axios.get('/library/books1')
        .then(resp => {
          if (resp.data.code == 200) {
            _this.books = resp.data.data;
          }
        })
    },
    methods: {
      showT(e) {
        this.$router.push({path:'/commodity',query:{book:e}});
      },
      show(){
        this.$router.push({path: '/book', query: {index: 25}});
      }
    }
  }
</script>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    height: 80px;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(3n) {
    background-color: #f9ff5c;
  }

  .el-carousel__item:nth-child(3n+2) {
    background-color: #f9ff5c;
  }
  .background {
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    z-index: -1;
    position: fixed;
  }
  .title {
    width: 200px;
    font-size: 13px;
    text-align: center;
  }

  .author {
    text-align: center;
    color: #333;
    width: 200px;
    font-size: 13px;
    margin-bottom: 6px;
  }
</style>
